<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<style type="text/css">
			#login {
				width: 500px;
				height: 400px;
				border: 2px gray solid;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 100px;
				box-shadow: 0 0 5px 5px gray;
			}

			#login>img {
				width: 300px;
				margin-top: 20px;
			}
		</style>
		<!--引入css-->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	</head>
	<body>
		<div id="login" align="center">
			<img src="img/logo.png" />
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="userName" required lay-verify="checkUserName" placeholder="请输入用户名"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="userPwd" required lay-verify="checkUserPwd" placeholder="请输入密码"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">验证码</label>
					<div class="layui-input-block">
						<input type="text" name="verify" required lay-verify="checkVerify" placeholder="请输入验证码"
							autocomplete="off" class="layui-input layui-input-inline">
						<!--							<img src="img/verify-code.gif" style="height: 40px;"/>-->
						<img src="http://127.0.0.1:8080/repair/kaptcha/kaptcha.jpg" style="height: 36px;"
							onclick="changeImg(this)" />
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function changeImg(verifyImg) {
				verifyImg.src = "http://127.0.0.1:8080/repair/kaptcha/kaptcha.jpg";
			}
			layui.use('form', function() {
				var form = layui.form;

				//自定义验证规则
				form.verify({
					checkUserName: function(value) {
						if (value.length < 5) {
							return '用户名长度不能小于5';
						}
					},
					checkUserPwd: function(value) {
						if (value.length < 3) {
							return '密码长度不能小于3';
						}
					},
					checkVerify: function(value) {
						if (value.length == 0) {
							return '验证码不能为空';
						}
					}

				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					//layer.msg(JSON.stringify(data.field));
					// var userName = 'admin';
					// var userPwd = '12345';
					// var verifyCode = 'verify';
					//通过ajax提交
					console.log(data.field.userName);
					console.log(data.field.userPwd);
					console.log(data.field.verify);
					var userName = data.field.userName;
					var userPwd = data.field.userPwd;
					var verifyCode = data.field.verify;
					layui.$.ajax({
						url: "http://127.0.0.1:8080/repair/user/login",
						method: "post",
						dataType: "json",
						xhrFields: {
							withCredentials: true //允许携带cookie
						},
						crossDomain: true,
						data: {
							userName: userName,
							userPwd: userPwd,
							verifyCode: verifyCode
						},
						success(data) {
							if (data.code == 200) {
								window.location.href = "index.html";
							} else {
								layui.layer.msg(data.msg);
							}
						}
					});


					return false;
				});
			});
		</script>
	</body>
</html>
